<template>
    <div id="login">
        <!--头部-->
        <div id="head">
            <a href="http://127.0.0.1:8080/#/Myjd1"></a>
            <span>京东登录</span>
        </div>
        <!--内筒部分-->
        <div id="content">
            <div id="contentTop"><!--用户名和密码-->
                <div id="username">
                    <input type="text" placeholder="用户名/邮箱/已验证手机" id="name">
                </div>
                <div id="password">
                    <input type="password" placeholder="请输入密码" id="passw">
                    <div id="passws">
                        <span></span>
                        <button id="btn">忘记密码</button>
                    </div>
                </div>
            </div>
            <div style="width:650px;height:60px"></div>
            <!--登录-->
            <a href="" id="logins" >登 录</a>
            <a href="" id="oneLogin" >一键登录</a>
            <!--登录方式-->
            <div id="loginWay">
                <a href="">短信验证码登录</a>
                <a href="http://127.0.0.1:8080/#/register">手机快速注册</a>
            </div>
            <!--其他登录方式-->
            <div id="otherLogin">
                <p>其他登录方式</p>
                <div id="otherLogins">
                    <a href="">
                        <i id="i1"></i>
                        <span>QQ</span>
                    </a>
                    <a href="">
                        <i id="i2"></i>
                        <span>微信</span>
                    </a>
                </div>
                <div id="button">
                   <p>登录即代表您已同意
                       <a href="">京东隐私政策</a>
                   </p>
                </div>
            </div>           
        </div>
  
    </div>
</template>
<script>
    export default {
        
    }
</script>
<style scoped lang="scss">
//http://127.0.0.1:8080/#/login
    *{
        margin:0;
        padding:0;
        list-style-type:none;
        text-decoration:none;
    }
//头部
    #head{
        width: 750pxl;
        height:88px;
        position: relative;
      
        //箭头
        a{
            display:block;
            width:20px;
            height:30px;
            //margin:30px 28px;
            background-image:url(../image/login/icon_arrow_down.png);
            background-repeat:no-repeat;
            background-size:100% 100%;
            color:#222;
            position:absolute;
            top:30px;
            left:35px;
        }
        //文字
        span{
            display:block;
            width:136px;
            height:38px;
            font-size:34px;
            position:absolute;
            top:28px;
            left:310px;
            color:#555;
        }
    }
//内容部分
    #content{
       width:650px;
       height:1035px;
       padding:0 50px 50px 50px;

        //用户名和密码
        #contentTop{
            width:650px;
            height:240px;

            div{
                width:650px;
                height:58px;
                padding:20px 0;
                margin-top:30px;
                border-bottom:1px solid #ccc;
                

                input{
                    display:block;
                    font-size:32px;
                    font-weight:300;
                    border:none;
                    outline:0;
                }
                //用户名
                #name{
                    width:590px;
                    height:58px;
                    padding-right:60px;    
                }
                
                input::-webkit-input-placeholder{
                    color:#555;
                }
                input::-moz-placeholder{   /* Mozilla Firefox 19+ */
                    color:#555;
                }
                input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
                    color:#555;
                }
                input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
                    color:#555;
                }
            }
            #password{
                display:flex;

                //密码
                #passw{
                    width:350px;
                    height:58px;
                    
                }
                //密码后面的按键
                #passws{
                    width:300px;
                    height:58px;
                    padding:0;
                    margin-top:0;
                    border:none;
                    display:flex;

                    span{
                        display:block;
                        width:48px;
                        height:48px;
                        margin:5px 30px 0 49px;
                        background-image:url(../image/login/3.png);
                        background-repeat:no-repeat;
                        background-size:100% 100%;
                    }

                    #btn{
                        display:block;
                        width:150px;
                        height:42px;
                        padding-left:32px;
                        border:none;
                        background-color:#fff;
                        border-left:1px solid #ccc;
                        font-size:28px;
                        color:#333;
                        margin-top:5px;
                    }
                }
            }
        }
        //登录和一键登录
        #logins{
            display:block;
            width:650px;
            height:100px;
            border-radius:50px;
            color:#fff;
            font-size:32px;
            text-align:center;
            line-height:100px;
            background-color:#fab3b3;
        }
        #oneLogin{
            display:block;
            width:650px;
            height:100px;
            border-radius:50px;
            color:#ff2000;
            font-size:32px;
            text-align:center;
            line-height:100px;
            border:1px solid #ff2000;
            margin-top:20px;
        }
        //登录方式
        #loginWay{
            width:650px;
            height:44px;
            margin-top:40px;
            display:flex;
            justify-content:space-between;

            a{              
              height:44px;
              display:block;
              font-size:30px;
              color:#999;
            }
            a:nth-of-style(1){
                width:220px;
            }
        }
        //其他登录方式
        #otherLogin{
            width:650px;
            height:273px;
            margin-top:176px;
            border-top:1px solid #ccc;

            //分割线
            p{
                width:144px;
                height:36px;
                padding:10px 30px;
                margin:auto;
                position: relative;
                top:-25px;
                text-align:center;
                line-height:36px;
                font-size:24px;
                color:#ccc;
                background-color:#fff;
            }
            //QQ和微信
            #otherLogins{
                width:650px;
                height:160px;
                display:flex;
                justify-content:center;

                a{
                    display:block;
                    width:96px;
                    height:96px;
                    margin:0 30px;

                    i{
                        display:block;
                        width:96px;
                        height:96px;
                        background-repeat:no-repeat;
                        background-size:100% 100%;                       
                    }
                    #i1{
                        background-image:url(../image/login/1.png)
                    }
                    #i2{
                        background-image:url(../image/login/2.png)
                    }
                    span{
                        display:block;
                        width:96px;
                        height:36px;
                        font-size:22px;
                        text-align:center;
                        line-height:36px;
                        color:#999;
                    }
                }
            }
            #button{
                width:650px;
                height:38px;
                margin-top:30px;
                p{
                    width:650px;
                    height:38px;
                    font-size:26px;
                    line-height:38px;
                    color:#999;
                    text-align:center;
                    padding:0;

                    a{
                        color:#409eff;
                    }
                }               
            } 
        }
    }    

</style>


